<app-log-out></app-log-out>

<nz-layout class="main-layout">
  <nz-sider
    class="custom-sider"
    [nzTheme]="'light'"
    [nzTrigger]="null"
  >
    <div class="sider-header">
      <a nz-icon nzType="book" nzTheme="outline"></a>
      <span class="sider-title">章节索引</span>
    </div>

    <nz-list class="index-list" [nzDataSource]="siderIndexList" [nzRenderItem]="indexItem">
      <ng-template #indexItem let-index>
        <nz-list-item
          class="index-item"
          [class.active]="activeIndexId === index.id"
          (click)="scrollToSection(index.id)"
        >
          <!-- 当前选中时显示 -->
          <span *ngIf="activeIndexId === index.id" style="color:cornflowerblue">
            {{ index.name }}
          </span>

          <!-- 未选中时的索引项 -->
          <span *ngIf="activeIndexId !== index.id">{{ index.name }}</span>
        </nz-list-item>
      </ng-template>
    </nz-list>
  </nz-sider>

  <nz-content class="content-main" #contentMain>
    <div class="text-title">
      <h1>第零章  序言</h1>
    </div>

    <section class="content-section">
      <span id="section1"></span>
      <h2 class="text-subtitle">你好，同学:</h2>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="text-content">
        在数学的浩瀚星空中，线性代数犹如一座坚实的桥梁，连接着纯粹数学与应用科学的广阔天地。它不仅是高等数学的重要分支，更是人工智能、数据科学、工程计算、物理学等领域不可或缺的基础工具。然而，对于许多学习者而言，线性代数中抽象的概念、
        复杂的运算以及晦涩的理论推导，常常成为通往知识彼岸的阻碍 —— 向量空间的维度难以直观感知，矩阵变换的逻辑不易梳理，特征值与特征向量的应用场景更是让人困惑不已。
        </span>
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="text-content">
        为了帮助更多学习者跨越这些障碍，轻松掌握线性代数的知识精髓，我们精心打造了这款线性代数学习网站。
        依托当前主流且高效的技术栈 —— 前端采用 Angular 框架，以其组件化、模块化的设计理念，为学习者呈现流畅、直观且交互性强的学习界面，无论是公式的清晰展示、图形的动态演示，还是习题的即时反馈，都能带来沉浸式的学习体验；后端采用 SpringBoot 框架，凭借其轻量化、高效率的优势，为网站提供稳定可靠的数据支撑与业务逻辑处理，
        确保学习资源的高效加载、用户学习数据的安全存储，以及个性化学习路径的精准推荐。
        </span>
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="text-content">
        在这里，你将告别枯燥的单向知识灌输：我们将抽象的线性代数知识拆解为通俗易懂的模块，
        通过生动的动画演示向量的线性组合、矩阵的乘法变换，用实例解析行列式在几何中的应用、
        线性方程组在实际问题中的求解；你可以根据自身学习进度，在 “知识点精讲” 板块夯实基础，在 “互动习题” 板块检验学习成果，在 “案例分析” 板块探索线性代数在真实场景中的应用，
        甚至可以在 “学习社区” 与其他学习者交流心得、共同进步。
        </span>
      </p>
    </section>
    <section class="text-content">
      <span id="section2"></span>
      <h2 class="text-subtitle">技术栈介绍:</h2>
      <p style="font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace">
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="star" [nzSpin]="true"></i>语言: Java8 OpenJDK21 nodejs16.20.2<br>
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="star" [nzSpin]="true"></i>前端: Angular 14.3.0<br>
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="star" [nzSpin]="true"></i>后端: SpringBoot 3.5.6<br>
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="star" [nzSpin]="true"></i>插件: npm 8.19.4
      </p>
    </section>

    <section class="content-section">
      <span id="section3"></span>
      <h2 class="text-subtitle">作者介绍:</h2>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计算机科学与技术学院&nbsp;&nbsp;软件与理论<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <i nz-icon nzType="fire" style="color: red"></i>宋璟  22009200677  2203015<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        张博威 22009200724 2203012
      </p>
    </section>

  </nz-content>
</nz-layout>

